<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
<title>考勤机列表</title>
<c:import url="/WEB-INF/jsp/head.jsp" />
<c:import url="/WEB-INF/jsp/plugin/loading.jsp" />
<link rel="stylesheet" href="static/css/modal.css">
<script type="text/javascript" src="static/js/bootbox.4.4.0.min.js"></script>
<c:import url="/WEB-INF/jsp/plugin/vue.jsp" />
<c:import url="/WEB-INF/jsp/plugin/vue-paging.jsp" />
<script type="text/javascript" src="static/js/attendance/machine.js"></script>
<style type="text/css">
.default-theme .form-group {
	margin-bottom: 0;
}
</style>
</head>
<body>
	<div id="app" v-cloak class="default-theme container-fluid iframe">
		<div class="col-md-12">
			<div class="panel panel-default">
				<div class="panel-heading">搜索条件</div>
				<div class="panel-body">
					<div class="form-inline">
						<div class="form-group">
							<button class="btn btn-default" @click="serach">
								<span class="glyphicon glyphicon-search">搜索</span>
							</button>
						</div>
						<div class="form-group">
							<button class="btn btn-info" @click="showModal(undefined)">
								<span class="glyphicon glyphicon-plus">新增</span>
							</button>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-md-12">
			<table class="table table-hover table-border">
				<thead>
					<tr>
						<th style="min-width: 6rem">考勤机编号</th>
						<th style="min-width: 6rem">考勤机地址</th>
						<th style="min-width: 6rem">考勤机名称</th>
						<th style="min-width: 8rem">考勤机备注</th>
						<th style="min-width: 8rem">状态</th>
						<th style="min-width: 20rem; width: 20rem">操作</th>
					</tr>
				</thead>
				<tbody>
					<tr v-if="items.length === 0" align="center">
						<td colspan="6">没有查询到数据</td>
					</tr>
					<tr v-for="item in items">
						<td>{{item.id}}</td>
						<td>{{item.address}}</td>
						<td>{{item.name}}</td>
						<td>{{item.remark}}</td>
						<td>{{translatorStatus(item.status)}}</td>
						<td>
							<button type="button" class="btn btn-info btn-sm"
								@click="showModal(item.id)">
								<span class="glyphicon glyphicon-pencil">编辑</span>
							</button>
							<button type="button" class="btn btn-danger btn-sm"
								@click="del(item.id)">
								<span class="glyphicon glyphicon-trash">删除</span>
							</button>
							<button
								v-if="item.status === 0 || item.status === 1 || item.status === 3"
								type="button" class="btn btn-success btn-sm"
								@click="connec(item.id)">
								<span class="glyphicon glyphicon-refresh">连接</span>
							</button>
							<button v-if="item.status === 2" type="button"
								class="btn btn-warning btn-sm" @click="stop(item.id)">
								<span class="glyphicon glyphicon-off">断开</span>
							</button>
						</td>
					</tr>
				</tbody>
			</table>
			<paging :page="page"></paging>
		</div>
		<div class="modal-mask" v-if="show">
			<div class="modal-wrapper">
				<div class="modal-container" style="padding: 1rem 0; height: auto;">
					<form class="form-inline">
						<div class="form-group col-md-6" v-if="modalType === 1">
							<label for="exampleInputName2">考勤机编号</label> <input type="text"
								class="form-control" v-model="item.id" readonly="readonly">
						</div>
						<div class="form-group col-md-6">
							<label for="exampleInputName2">考勤机名称</label> <input type="text"
								class="form-control" v-model="item.name" placeholder="考勤机名称">
						</div>
						<div class="form-group col-md-6">
							<label for="exampleInputEmail2">考勤机地址</label> <input type="email"
								class="form-control" v-model="item.address"
								placeholder="192.168.1.1:50000">
						</div>
						<div class="form-group col-md-6">
							<label for="exampleInputEmail2">备注</label> <input type="email"
								class="form-control" v-model="item.remark" placeholder="备注">
						</div>
						<br />
						<div class="form-group col-md-12" style="margin-top: 2rem;">
							<button type="button" class="btn btn-info" @click="add"
								v-if="modalType === 0">
								<span class="glyphicon glyphicon-plus">新增</span>
							</button>
							<button type="button" class="btn btn-info" @click="edit"
								v-if="modalType === 1">
								<span class="glyphicon glyphicon-pencil">编辑</span>
							</button>
							<button type="button" class="btn btn-default" @click="closeModal">
								<span class="glyphicon glyphicon-remove">关闭</span>
							</button>
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>
</body>
</html>